<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h2>今天天气真的很{{isHot?"炎热":"寒冷"}}</h2>
        <!-- 通过v-on方法赋予属性以methods中的函数 -->
        <button v-on:click="changeWeather">改变天气</button>
    </div>
</body>

</html>
<script src="../../../vue.js"></script>
<script>
    "use strict";
    Vue.config.productionTip = false;
    new Vue({
        el: "#app",
        data() {
            return {
                isHot: true,
                //原则上来说,在data中书写函数,并且是箭头函数,函数内的this是指向当前的vue实例对象
                //但是一旦写成了普通函数,则this指向全局window,严格模式下会指向null,都不是我们想要的
                //但是我们不会把函数书写在data中,1.必须书写箭头函数 2.函数和数据混杂在一起不容易维护(data就是为了写数据的)
            };
        },
        /* 
          methods选项中用来书写方法,比如事件回调函数,也有我们自己封装的函数等等
          methods中的方法已经被vue统一处理过了,vue控制methods中所有的方法的this指向当前的vue实例
          为什么要把methods方法的this指向vm实例呢?因为方法一般都是用来操作数据的,而数据都在vm实例上放
          methods中的方法也会全部的放在vm实例上,供我们使用
        */
        methods: {
            changeWeather() {
                // console.log(this);
                this.isHot = !this.isHot;
            },
        },
    });
</script>